<template>
	<div class="toFlist2">
<div class="top" >
<div class="tehui" v-for="(item,index) in arr" :key="index">
<div class="teTOP">
	<img :src="item.img" alt="">
	<span class="span2">{{ item.text }}</span>
</div>
<div class="teBottom">
	<img :src="item.img1" alt="">
	<div class="p">
		<p>{{ item.text1 }}</p>
		<span>{{ item.text2 }}</span>
		<span class="span">{{ item.text3 }}</span>
	</div>
</div>

</div>
<div class="tejia" v-for="(item,index) in arrs" :key="index-'origin'">
<div class="teTOP">
	<img :src="item.img" alt="" class="imgs">
	<span class="span3">{{ item.text }}</span>
</div>
<div class="teBottom ">
	<img :src="item.img1" alt="" class="img1">
	<div class="p tebottom">
		<p>{{ item.text1 }}</p>
		<span>{{ item.text2 }}</span>
		<span class="span1">{{ item.text3 }}</span>
	</div>
</div>
</div>
</div>
<div class="bottom" >

	<div class="bot" v-for="(v,index) in ars" :key="index-'orinin'">
		<div class="left">
			<img :src="v.imgs" alt="">
			<span>{{ v.tex}}</span>
			<span class="botsp">{{ v.tex1}}</span>
		</div>
		<div class="right">{{ v.tex2}}</div>
	</div>

	<div class="toms">
		<div class="tom" v-for="(item,index) in ars1" :key="index">
		
			<img :src="item.imgs1" alt="">
			<span>{{ item.tex3}}</span>
			<p>{{ item.tex4}}</p>
		</div>
	</div>
</div>

<div class="cai">
	<van-sticky :offset-top="93">
		<van-tabs>
			<van-tab title="猜你喜欢"></van-tab>
			<div  class="qing">
				<van-tab title="情人节">
				</van-tab>
			</div>
			<van-tab title="景点门票"></van-tab>
			<van-tab title="云南"></van-tab>
		</van-tabs>
	</van-sticky>
		<img :src="img5">
</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			img5: "https://img.alicdn.com/imgextra/i1/O1CN01sU3A5I1drPQfalhKy_!!6000000003789-1-tps-144-72.gif" ,
			arr: [
				{ img: "", text: "天天特惠", img1: "https://gw.alicdn.com/imgextra/i2/6000000000120/O1CN01HJksWd1Cl0L3J0YM8_!!6000000000120-0-hotel.jpg_360x10000Q75.jpg_.webp", text1: "北京威林顿精品大酒店", text2: "限时特惠", text3: "今日特价酒店" }
			],
			arrs: [{ img: "", text: "特价机票", img1: "https://gw.alicdn.com/imgextra/i1/O1CN01ciJybz1jJPl1CabnK_!!6000000004527-2-tps-468-237.png_360x10000.jpg_.webp", text1: "深圳 上海 单程", text2: "¥400起", text3: "0.7折" }],
			ars: [
				{ imgs: "", tex: "飞猪必玩榜", tex1: "让旅行更简单", tex2: "榜单广场 >"},
			],
			ars1: [
				{ tex3: "城市热门景点", imgs1: "https://gw.alicdn.com/imgextra/i4/O1CN01EJKiZG1rOvQnR1caj_!!6000000005622-2-tps-2144-1346.png_220x10000.jpg_.webp", tex4: "三亚·景点榜" },
				{ tex3: "慢享亲子时光", imgs1: "https://gw.alicdn.com/bao/uploaded/i3/154620275677830257/TB2yYT0Xae5V1BjSspkXXcoqpXa_!!0-travel.jpg_220x10000Q75.jpg_.webp", tex4: "济南·景点榜" },
				{ tex3: "网红打卡好去处", imgs1: "https://gw.alicdn.com/tfscom/TB1SWLBgicKOu4jSZKbSuw19XXa_220x10000Q75.jpg_.webp", tex4: "全国·景点榜" },
			]
		}
	}
}
</script>

<style scoped>
.toFlist2{
	height: 6.5rem;
	padding:0 10px 0 10px ;
	box-sizing: border-box;
}
.top{
	display: flex;
	height: 2.3rem;
	justify-content: space-between;
	box-sizing: border-box;
}
.tehui{
	width:  3.36rem;
	height: 2.3rem;
	border-radius: .3rem;
	background: 50%/contain no-repeat url('https://gw.alicdn.com/imgextra/i4/O1CN01ka2pAb1NKP2K0nHTx_!!6000000001551-2-tps-672-460.png_570x10000.jpg');
	padding: 5px;
	box-sizing: border-box;
}
.tejia{
	width:  3.36rem;
	height: 2.3rem;
	border-radius: .3rem;
	background: 50%/contain no-repeat url('https://gw.alicdn.com/imgextra/i2/O1CN01UpSApy21oFTtTYEpN_!!6000000007031-2-tps-672-460.png_570x10000.jpg');
}
.span2{
	color: red;
	margin-left: .1rem;
	font-size: 14px;
	margin-top: -5px;
}
.span3{
		margin-left: .1rem;
		font-size: 14px;
		margin-top: -5px;
}
.teTOP .imgs{
	margin-top: 5px;
	margin-left: .1rem;
}
.teTOP img{
	width: .3rem;
	height: .3rem;
	margin-top: 3px;
	margin-left: 5px;
}
.teBottom{
	width: 3.12rem;
	height: 1.65rem;
	margin-top: 5px;
	border-radius: .3rem;
	box-sizing: border-box;
}
.teBottom img{
	width: 100%;
	height: 100%;
	border-radius: .3rem;
}
.img1{
	margin-left: 6px;
	margin-top: 3px;
}
.teBottom .p{
	width: 2.85rem;
	height: .48rem;
	padding: 8px;
	position: relative;
	top: -45px;
	color: white;
}
.tebottom{
	margin:0 10px ;
}
.span{
	display: block;
	width: 1.3rem;
	height: .3rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: #fd0;
	color: black;
	margin-left: 15px;
	border-radius: .1rem;
	padding:  0  0 0 .15rem;
	box-sizing: border-box;
	position: relative;
	left: 1rem;
	top: -0.3rem;
}
.span1{
	height: .3rem;
	background: #fd0;
	color: black;
	margin-left: 15px;
	border-radius: .1rem;
	padding:  0 .15rem 0 .15rem;
	box-sizing: border-box;
	position: relative;
	left: 0;
	top: 0;
}
.bottom{
		width: 7.1rem;
		height: 2.85rem;
		background-image: url('https://gw.alicdn.com/imgextra/i2/O1CN01taRRJa1o4MnXFmIoP_!!6000000005171-2-tps-1380-556.png_570x10000.jpg');
		margin-top: 10px;
		border-radius: .3rem;
		box-sizing: border-box;
}
.bot{
	padding: 5px;
	display: flex;
	justify-content: space-between;
}
.bot .left img{
	width: .3rem;
	height: .3rem;
	margin-right: 5px;
	margin-left: .13rem;
}
.bot .left{
font-size: 14px;
}
.bot .left .botsp{
			background: #fff;
			border-radius: 10px;
			color: #42664b;
			margin-left: 5px;
			padding:0 8px ;
}
.bot .right{
	background: #fff;
		border-radius: 10px;
			padding: 0 8px;
}
.toms{
display: flex;
	justify-content: space-between;
}
.tom{
	width: 2.12rem;
	height: 2.06rem;
	margin-left: .13rem;
	box-sizing: border-box;
	
}
.tom span{
	position: relative;
	top: -2rem;
	left: .2rem;
	color: white;
}
.tom img{
	width: 100%;
	height: 100%;
	border-radius: .2rem;
}

.tom p{
		position: relative;
		top: -0.8rem;
		left: .15rem;
		color: white;
}
.cai{
	margin-top: .2rem;
	line-height: 1rem;
	/* background-color: aquamarine; */
}
::v-deep .van-button{
	width: 7.5rem;
}
/* van-tab  */
::v-deep .van-tab--active {
	height: .6rem;
	border: 1px solid rgba(202, 200, 200, 0.384);
	border-radius: .6rem;
	background-color: rgba(255, 221, 0, 0.648);
}
.cai img{
	width: .72rem;
	height: .36rem;
	position: relative;
	top: -50px;
	left: 3rem;
}
.qing{
	color: pink;
}
::v-deep .van-tabs__line{
	display: none;
}
/*  van-tab--active  */
::v-deep .van-tab{
margin-top: 5px;
margin-bottom: 5px;
}
</style>